<template>
  <div class="print-index">
    <div
      class="print-box"
      id="printContent"
      style="height: 300px; width: 400px; overflow: hidden"
    >
      <ul class="title">
        <li>NBC设备标识</li>
        <li>
          <canvas ref="photoQrcode" />
        </li>
      </ul>
      <ul class="content">
        <li>
          <span class="content-value">设备名称:</span>
          <span class="content-value">{{ obj.ProSegmentName }}</span>
        </li>
        <li>
          <span class="content-value">设备编号:</span>
          <span class="content-value">{{ obj.ProSegmentNo }}</span>
        </li>
        <li>
          <span class="content-value">生产车间:</span>
          <span class="content-value">{{ obj.SegmentName }}</span>
        </li>
        <li>
          <span class="content-value">资产编号:</span>
          <span class="content-value">{{ obj.ProSegmentAssetNo }}</span>
        </li>
      </ul>
    </div>
    <div class="btnClick">
      <div class="btn" @click="htmlCanvas()">打印</div>
    </div>
  </div>
</template>
<script>
import QrCode from "qrcode";
import JsBarcode from "jsbarcode";
import html2canvas from "html2canvas";
/** 引入打印组件 */
import printJS from "print-js";
export default {
  data() {
    return {
      obj: {}, //打印信息
    };
  },
  components: {
    QrCode,
  },
  created() {},
  mounted() {
    this.obj = JSON.parse(this.$route.query.item);
    this.$nextTick(() => {
      this.qrCode(this.obj.ProSegmentBarcode);
      this.getBarcode(this.obj.ProSegmentBarcode);
    });
  },
  computed: {},
  methods: {
    //二维码
    qrCode(url) {
      if (url) {
        let options = {
          text: url,
          displayValue: true,
          fontSize: 10,
          width: 170,
          height: 170,
        };
        //弹层为true时，视图还没有更新，所以拿不到ref，因为视图更新是异步的
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.photoQrcode, url, options); // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        });
      } else {
        this.$message.warning("还没有上传图片");
      }
    },
    //QCR的style配置
    getBarcode(url) {
      let options = {
        text: url,
        fontSize: 10,
        height: 170,
        width: 170,
      };
      this.$nextTick(() => {
        //这个根据自己的代码 论情况写
        JsBarcode("#barcode", url, options);
        //#barcode 对应容器中的id
        //987654321 是条形码的携带的信息，和option中的text显示信息要区分
        //options:是条形码的配置信息
      });
    },
    //导出生产图片
    htmlCanvas() {
      let that = this;
      // 获取要导出的DOM

      document.querySelector("#printContent").style.transform = "scale(0.8)";
      const rect = document
        .querySelector("#printContent")
        .getBoundingClientRect();

      html2canvas(document.querySelector("#printContent"), {
        width: rect.width,
        height: rect.height,
      }).then(function (canvas) {
        const pageData = canvas.toDataURL("image/jpeg", 2);
        const imgData = pageData.replace("image/jpeg", "image/octet-stream");

        that.PrintRow(imgData);
      });
    },
    //打印函数
    PrintRow(url) {
      printJS({
        printable: url, // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: "image", // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
        font_size: "14mm",
        targetStyles: ["*"], // 库在打印HTML元素时处理任何样式
      });
      document.querySelector("#printContent").style.transform = "scale(1)";
    },
  },
};
</script>
<style scoped lang="less">
@media print {
  canvas {
    image-rendering: crisp-edges;
  }
}
.print-index {
  height: 80%;
  width: 80%;
  position: relative;
  .print-box {
    width: 20rem;
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 20px;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      li {
        font-size: 20px;
        display: flex;
      }
    }
    .content-value {
      margin-left: 20px;
    }
  }
  .btnClick {
    margin-right: 10px;
    // cursor: pointer;
    display: flex;
    justify-content: flex-end;
    .btn {
      cursor: pointer;
      padding: 0.3125rem 0.625rem;
      box-sizing: border-box;
      border: 1px solid #000;
      border-radius: 0.3125rem;
    }
  }
}
</style>
